<template>
  <div>
    <!-- 顶部搜索栏模块 -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      class="search-bar"
      shape="round"
      @click="openSearch"
    />
    <!-- 轮播图模块 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :show-indicators="false"
      duration="1000"
    >
      <van-swipe-item
        class="swipe-it"
        v-for="(item, index) in imgs"
        :key="index"
      >
        <img class="swipe-it-img" :src="item.url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 热销推荐菜单类模块 -->
    <van-grid :column-num="4" class="menu" :border="false">
      <van-grid-item
        v-for="(item, index) in classList"
        @touchend.native="openPage(item,index)"
        :key="index"
        :icon="item.icon"
        :text="item.text"
      >
      </van-grid-item>
    </van-grid>
    <!-- 海报广告模块 -->
    <van-row type="flex" justify="center" class="flex-poster">
      <van-col class="flex-left" span="9">
        <img :src="require('@/assets/images/redbag.png')" alt="" />
      </van-col>
      <van-col class="flex-right" span="12">
        <template
          ><img
            :style="{ width: '100%', height: '48%' }"
            :src="require('@/assets/images/new.jpg')"
            alt=""
        /></template>
        <template
          ><img
            :style="{ width: '100%', height: '48%' }"
            :src="require('@/assets/images/new.jpg')"
            alt=""
        /></template>
      </van-col>
    </van-row>
    <!-- 商品列表模块 -->
    <div class="newGoods">
      <h4>New</h4>
      <div class="new-goods-list">
        <goods-item class="new-goods-list-item" @click.native="openGoods(item)" v-for="(item,index) in newGoodsList" :key="index" :goodsInfo="item"/>
       
      </div>
    </div>
  </div>
</template>

<script>
import {
  NavBar,
  Search,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Col,
  Row,
} from "vant";
import GoodsItem from './HomeChildren/GoodsItem.vue'

import { getHomeInfo } from "@/network/index.js";

export default {
  name: "Home",
  data() {
    return {
      value: "",
      imgs: [],
      classList: [
        {
          icon: require("@/assets/menuicon/groupbuy.png"),
          text: "团购专区",
        },
        {
          icon: require("@/assets/menuicon/brand.png"),
          text: "品牌商",
          name: 'Brand'
        },
        {
          icon: require("@/assets/menuicon/recommend.png"),
          text: "新品列表",
          name: 'recommend'
        },
        {
          icon: require("@/assets/menuicon/popular.png"),
          text: "人气推荐",
          name: 'popular'
        },
      ],
      newGoodsList: []
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Search.name]: Search,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Col.name]: Col,
    [Row.name]: Row,
    GoodsItem
  },
  methods: {
    //获取首页信息
    async getIndexInfo() {
      const {
        data: { data },
      } = await getHomeInfo();
      // console.log(data);
      this.imgs = data.banner;
      this.newGoodsList = data.newGoodsList
    },
    //打开商品详情信息页
    openGoods(item) {
      this.$router.push({
        name: 'GoodsDetail',
        query: {
          id: item.id
        }
      } )
    },
    //打开搜索页
    openSearch() {
      // console.log(1);
      this.$router.push('/Search')
    },
    //打开菜单栏分页
    openPage(item,index) {
      if(index === 1) {
        console.log(item);
        this.$router.push({name: item.name})
      }
    }
  },
  created() {
    //组件创建时请求首页数据并且渲染
    this.getIndexInfo();
    
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@import url("//at.alicdn.com/t/font_2706956_07k7y8xor7ax.css");

.search-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
.my-swipe {
  margin-top: 54px;
  height: 170px;

  .swipe-it-img {
    height: 170px !important;
    width: 100%;
  }
}
.icon-w {
  font-size: 28px;
}
.menu {
  margin-top: 10px;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 90%;
    height: 1px;
    background: #d7d7d7;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.flex-poster {
  padding-top: 10px;
  .flex-left {
    height: 160px;
    // width: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(249, 233, 207);
    img {
      height: 90%;
      width: 90%;
    }
    .flex-right {
      width: 150px;
      display: flex;
      justify-content: center;
      background: rgb(249, 233, 207);
    }
  }
}

.newGoods {
  margin-top: 15px;
  width: 100%;
  h4 {
    width: 90%;
    margin: 10px auto;
    color: #c4c4c4;
  }
  .new-goods-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .new-goods-list-item {
      width: 45%;
      height: 217px;
      margin-bottom: 10px;
    }
  }
}
</style>

